<template>
  <div>App</div>
  <p>person:{{ person }}</p>
  <p>count:{{ count }}</p>
  <button @click="changeCount">changeCount</button>
  <button @click="changePerson1">changePerson1</button>
  <button @click="changePerson2">changePerson2</button>
  <Header />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
  import { ref,watch } from 'vue';
  import Header from './components/Header.vue';

  const count = ref(1);
  const changeCount = () => {
    count.value++;
  }

  interface personType {
    name:string;
    age?:number;
    sex:string;
    height?:number;
    score:{
      ch:number;
      math:number
    };
    girFri:string[]
  }
  const person = ref<personType>({
    name:"xiaowang",
    age:20,
    sex:"nan",
    score:{
      ch:110,
      math:120
    },
    girFri:["lily","lucy"]
  })
  const changePerson1 = () => {
    person.value.age = (person.value.age as number) + 1;
    person.value.girFri.push("xiaohua")
  } 
  const changePerson2 = () => {
    person.value = {...person.value,height:180}
  }

  // 1.监听一个ref对象：可以监听ref对象value属性的改变（被替换）
  // 可以监听count改变（被替换）
  /* watch(count,() => {
    console.log("变了变了");
  }) */
  // 可以监听person改变（被替换）
  /* watch(person,() => {
    console.log("变了变了");
  }) */
  // 无法监听ref对象内部的代理对象内部的改变（需要深度监听）
  /* watch(person,() => {
    console.log("变了变了");
  },{
    deep:true
  }) */

  // 2.监听ref对象的value属性
  // 只能监听value被替换，如果监听内部的属性需要深度监听
  /* watch(() => person.value,() => {
    console.log("变了变了");
  }) */

  /* watch(() => count.value,() => {
    console.log("变了变了");
  }) */

  // ！！！！补充！！！！！
  // 如果监听的属性是对象类型，则可以不写函数式写法，并且默认深度监听
/*   watch(person.value,() => {
    console.log("变了变了");
  })
 */
  // 3.监听ref对象中proxy代理对象的某个属性
 /*  watch(() => person.value.age,() => {
    console.log("age变了");
  }) */

  watch(() => person.value.girFri,() => {
    console.log("girFri变了");
  },{
    deep:true
  })
</script>

<style  scoped lang="scss">
  
</style>